<div class="text-center">

	<h2 translate="TOPLISTS.LEECHBONUS"></h2>

	<div ng-show="vm.error" class="alert alert-warning" role="alert" translate="GENERAL.PAGE_ACCESS_LIMIT" translate-value-class="Movie star"></div>
	<loading-indicator hide="vm.users || vm.error"></loading-indicator>

	<div class="col-md-6 col-centered nopadding" ng-show="vm.users">
		<table class="table table-striped table-hover">
			<tr>
				<th class="text-left" style="width: 70px;">#</th>
				<th class="text-left" translate="MENU.USERS"></th>
				<th style="width: 250px;" translate="TOPLISTS.LEECHBONUS_PERCENT"></th>
			</tr>
			<tr>
				<td>
					#1-100
				</td>
				<td class="text-left">
					<div ng-repeat="user in ::vm.users | filter: {leechbonus: 100}">
						<user user="::user" show-class="false" ></user>
						<br />
					</div>
				</td>
				<td>
					<uib-progressbar class="progress-striped active" value="100" type="warning">100%</uib-progressbar>
				</td>
			</tr>
			<tr ng-repeat="user in ::vm.users | filter: {leechbonus: '!100'}">
				<td>
					#{{ $index + 101}}
				</td>
				<td class="text-left">
					<user user="::user" show-class="false"></user>
				</td>
				<td>
					<uib-progressbar class="progress-striped active" value="::user.leechbonus" type="warning">{{ user.leechbonus }}%</uib-progressbar>
				</td>
			</tr>
		</table>
	</div>

</div>
